<template>
  <div class="login-container">
    <el-header class="login-header">
      <el-image class="header-img" src="../../static/img/logo.jpg"></el-image>
    </el-header>
    <el-main class="login-main">
      <el-image class="login-img" src="../../static/img/gym.png"></el-image>
        <el-form :model="ruleForm2" :rules="rules2"
                 status-icon
                 ref="ruleForm2"
                 label-position="left"
                 label-width="0px"
                 class="demo-ruleForm login-page">
          <h3 class="title">交大体育赛事票务系统</h3>
          <el-form-item prop="uid">
            <el-input type="text"
                      v-model="ruleForm2.uid"
                      auto-complete="off"
                      placeholder="用户名"
                      clearable
                      class="te"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input type="password"
                      v-model="ruleForm2.pwd"
                      auto-complete="off"
                      placeholder="密码"
                      class="te"
                      @keyup.enter.native="handleSubmit"
                      clearable
                      show-password
            ></el-input>
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button class="login-btn-cls" @click="handleSubmit" :loading="logining">登 录</el-button>
            <el-row>
              <el-col :span="24" :align="'right'">
                <el-button type="text" @click="register">>> 去注册</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
    </el-main>
    <el-footer>
      <ets-footer/>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: 'Login',
  components: {},
  created () {
    if (localStorage.getItem('resetPwdUsername')) {
      this.ruleForm2.uid = localStorage.getItem('resetPwdUsername')
    }
    // 解析登陆了路径是否有重定向路由，如果有登录之后就跳转至该重定向的路由
    // 否则使用默认的路由'/index'
    if (this.$route.query.target) {
      this.target = this.$route.query.target
    }
  },
  data () {
    return {
      logining: false,
      tips: '',
      target: '/index',
      ruleForm2: {
        uid: '',
        pwd: ''
      },
      rules2: {
        uid: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        pwd: [{required: true, message: '请输入密码', trigger: 'blur'}]
      }
    }
  },
  methods: {
    handleSubmit (event) {
      let _this = this
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          this.logining = true
          let iv = _this.randomIv(16)
          _this.ruleForm2.pwd = _this.encrypt(_this.ruleForm2.pwd, iv)
          let enPass = _this.ruleForm2.pwd
          this.$axios({
            url: '/api/login',
            method: 'post',
            data: JSON.stringify({
              username: _this.ruleForm2.uid,
              password: enPass,
              iv: iv
            }),
            headers: {
              'Content-Type': 'application/json; charset=utf-8'
            }
          }).then((response) => {
            if (response.data.code === 1) {
              localStorage.setItem('token', response.data.data.token)
              localStorage.setItem('role', response.data.data.userType)
              localStorage.setItem('username', _this.ruleForm2.uid)
              localStorage.setItem('userID', response.data.data.userID)
              this.$router.push({path: _this.target})
            } else {
              this.logining = false
              _this.ruleForm2.pwd = ''
              _this.ruleForm2.uid = ''
              _this.loginErr(response.data.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    loginErr (msg) {
      this.$notify.error({
        title: '错误',
        message: msg,
        duration: 5000
      })
    },
    register () {
      this.$router.push({
        path: '/register'
      })
    }
  }
}
</script>

<style scoped>
.title{
  text-align: center;
  margin-bottom: 40px;
  color: var(--them-color);
  font-size: 30px;
}

.login-container {
  width: 100%;
  height: 100%;
}

.login-header{
  margin-bottom: 40px;
}

.login-main{
  padding-top: 5%;
  height: 65%;
  background-color: #17073d;
}

.header-img{
  position: absolute;
  left: 10%;
  top: 2%;
  width: 219px;
  height: 60px;
}

.login-img{
  position: absolute;
  left: 12%;
  margin-top: 3%;
  width: 40%;
  height: 30%;
}

.login-page {
  -webkit-border-radius: 5px;
  border-radius: 10px;
  position: relative;
  right: -65%;
  width: 360px;
  padding: 35px 35px 30px;
  background-color: var(--white-color);
}

.login-btn-cls {
  width:100%;
  background-color: var(--them-color);
  color: #FFFFFF;
  border: none;
  font-size: 20px;
}
</style>
